<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>angular 实例</title>
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<style>
		select{border: #ccc solid 1px; border-radius: 4px;color: #666;margin-left: 5px;margin-bottom: 15px;}
	</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
	<p>我是第一个表达式 {{5+5}}</p>
	<p ng-init="oprese=2;ints=6.3"><span>总价：{{oprese*ints | currency}}</span> — <span ng-bind="oprese*ints"></span></p>

	<div ng-init="firstname='Font'"></div>
	<p>姓名为：<span ng-bind="firstname"></span></p>

	<input type="button" ng-click="toggle()" value="隐藏/显示">
	<div ng-hide="myVar">
		<p>姓：<input type="text" ng-model="firstname"></p>
		<p>名：<input type="text" ng-model="lastname"></p>
		<!-- <p>姓：<input type="text" ng-model="person.firstname"></p>
		<p>名：<input type="text" ng-model="person.lastname"></p> -->
		<P>姓名：{{firstname+" "+lastname | lowercase}}</P>
		<i>姓名：{{fullName() | uppercase}}</i>
	</div>

	<p><b>数组</b></p>
	<p ng-init="person={firstname:'Jond',lastname:'demo'}">
		<span>姓为：{{person.firstname}}</span>
		<span ng-bind="person.lastname"></span>
	</p>
	<p ng-init="points=[1,2,69,63,54,48.66]">第3个值为:{{points[2]}}</p>
	<p ng-bind="points[2]"></p>

	<p>
		<input type="text" ng-model="names">
		你的姓名是：{{names}}
		<p ng-bind="names"></p>
	</p>

	<p data-ng-init="options=['nihao','duoduo','miaomiao','caicai']"><!-- 数组 -->
		<ul>
			<li data-ng-repeat="x in options">
				{{x}}
			</li
		</ul>
	</p>

	<p ng-init="opti=[{name:'join',country:'cc'},{name:'code',country:'jj'},{name:'zhong',country:'dd'}]">
	过滤：<input type="text" ng-model="test">
		<ul>
			<li ng-repeat="x in opti | filter:test | orderBy:'name'">
				{{"编号："+($index+1)+"、姓名："+x.name+" 、 国家："+x.country}}
			</li>
		</ul>
	</p>

	json
	<ul>
		<li ng-repeat="x in artsky"></li>
	</ul>

	disabled
	<p>
	<button ng-disabled="mybutton" ng-click="count=count+1">点击</button>
	</p>
	<p>
	  <input type="checkbox" ng-model="mybutton">
	</p>
<p>{{mybutton}}、{{count}}</p>


<p ng-show="true">被你发现 了</p>
<p ng-show="false">你看不见我，看不见我，看不见我</p>

<b>AngularJS 表单</b>
<form action="" novalidate>
	姓：<input type="text" ng-model="user.firstname">
	名：<input type="text" ng-model="user.lastname">
	<br>
	<button ng-click="reset()">reset</button>
</form>
<p> from={{user}}</p>
<p>master={{master}}</p>


<br>
<br>
<h2>验证实例</h2>
<from name="myFrom" novalidate>
	<p>
		用户名：<input type="text" name="usermsg" ng-model="usermsg" required>
		<span style="color: red;" ng-show="myFrom.usermsg.$dirty && myFrom.usermsg.$invalid">
			<span ng-show="myFrom.usermsg.$error.required">用户名是必须的</span>
		</span>
	</p>
	<p>
		邮箱：<input type="email" name="email" ng-model="email" required>
		<span style="color:red;" ng-show="myFrom.email.$dirty && myFrom.email.$invalid">
			<span ng-show="myFrom.email.$error.required">邮箱必须填</span>
			<span ng-show="myFrom.email.$error.email">邮箱格式不正确</span>
		</span>
	</p>
</from>
<input type="submit" ng-disabled="myFrom.usermsg.$dirty && myFrom.usermsg.$invalid || myFrom.email.$dirty && myFrom.email.$invalid">
	<script>
		var app=angular.module('myapp',[]);//定义函数
		app.controller('myCtrl',function($scope,$http){//依赖注入
			$scope.firstname="join";
			$scope.lastname="DOME";
			$scope.myVar=false;
			$scope.fullName=function(){
				return $scope.firstname+" "+$scope.lastname;
			};
			$scope.toggle=function(){
				$scope.myVar=!$scope.myVar;
			};

			$scope.master={firstname:"bai",lastname:"_zeng"};
			$scope.reset=function(){
				$scope.user=angular.copy($scope.master);
			}
			$scope.reset();

			$scope.email="bai_zeng@163.com";
			$scope.usermsg="bai zeng";
			//跨域请求啦
			// $http.get('http://www.artsky.com/Artsky/wh?cmd="+{"data":{"exhibitionId":"1208","type":"10","rows":"10","page":"1"},"route":"getVoiceList","common":{"version""'+
			// ':"1.0","os":"5.0","channel":"1","deviceToken":"","plat":"wechat","interVersion": "2", "language": "zh"}}').success(function(response){$scope.artsky=response.result.list})
		})

		// function myCtrl($scope){
		// 	$scope.person={
		// 		firstName="Dove",
		// 		lastName="dai"
		// 	}
		// 	$scope.fullName=function(){
		// 		return $scope.person.firstName +" "+ $scope.person.lastName;
		// 	}
		// }
	</script>
</body>
</html>